<template>
    <div class="wrap">
        <el-steps style="width: 78%;margin-left: 22%;margin-bottom: 15px" space="30%" :active="1"
                  finish-status="success">
            <el-step title="已结算"></el-step>
            <el-step title="未支付"></el-step>
            <el-step title="未完成"></el-step>
        </el-steps>
        <div class="table-main">
            <template>
                <ul class="infinite-list" style="overflow:auto">
                    <li v-for="order in $store.state.Unsettled" class="infinite-list-item"
                        style="list-style-type: none">
                        <span>
                            {{order.subject}}
                        </span>
                        <span>
                            {{order.validTime}}
                        </span>
                    </li>
                </ul>
            </template>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Unsettled",
        created() {
            this.initData()
        },
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            initData() {

            }
        }
    }
</script>

<style scoped>
    .wrap {
        /*display: flex;*/
        /*flex-direction: column;*/
        /*align-content: center;*/
        /*justify-content: center;*/
    }

    .table-main {
        width: 100%;
        display: flex;
        /*flex-direction: column;*/
        align-content: center;
        justify-content: center;
    }
</style>